<template>
  <form-dialog
    :visible="visible"
    :loading="loading"
    @handleClose="handleClose"
    :title="title">
    <template slot="content">
      <el-form ref="form" :rules="rules" :model="form" label-width="90px">
        <el-form-item :label="$t('common.type')" prop='type'>
          <el-select v-model="form.type" :disabled='true'>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop='message' :label="$t('common.content')">
          <el-input type="textarea" maxlength="200" @keyup.enter.native="submit" show-word-limit v-model="form.message"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template slot="footer">
      <el-button @click="handleClose">{{$t('common.cancel')}}</el-button>
      <el-button type="primary" @click="submit">{{$t('common.confirm')}}</el-button>
    </template>
  </form-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialog from '../../../components/Dialog/formDialog.vue'
export default Vue.extend({
  components: {
    FormDialog
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      data: {},
      options: [
        {
          label: this.$t('desktopManage.notice'),
          value: 'notice'
        },
        {
          label: this.$t('desktopManage.notice'),
          value: 'info'
        }
      ],
      action: 'SENDMESSAGE',
      form: {
        type: '',
        message: ''
      },
      rules: {
        type: [
          { required: false, message: this.$t('desktopManage.message.selectSendType'), trigger: 'change' }
        ],
        message: [
          { required: true, message: this.$t('desktopManage.message.fillContent'), trigger: 'blur' },
          { max: 200, message: this.$t('desktopManage.message.fillContentLength'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClose () {
      this.visible = false;
    },
    submit () {
      (this.$refs['form'] as any).validate((valid: any) => {
        if (valid) {
          this.loading = true;
          let promiseArray: any = [];
          if (Array.isArray(this.data)) {
            (this.data as any).forEach((item: any) => {
              let ids: any = [];
              ids.push(item.id);
              promiseArray.push((this as any).$pandaApi.desktopOperation(item.desktop_pool, {action: this.action, message_type: this.form.type, ids: ids, message: this.form.message}))
            })
          } else {
            let ids: any = [];
              ids.push((this.data as any).id)
              promiseArray.push((this as any).$pandaApi.desktopOperation((this.data as any).desktop_pool, {action: this.action, message_type: this.form.type, ids: ids, message: this.form.message}))
          }
          Promise.all(promiseArray).then(res => {
            this.loading = false;
            this.visible = false;
            this.$emit('success');
            this.$message({
                message: this.$t('desktopManage.message.operationSuccess', {subject: this.$t('desktopManage.desktop'), operation: this.title}).toString(),
                type: 'success'
            });
          }).catch(() => {
            this.loading = false;
            this.$message({
              message: this.$t('desktopManage.message.operationFail', {subject: this.$t('desktopManage.desktop'), operation: this.title}).toString(),
              type: 'warning'
            });
          })
        } else {
          return false
        }
      })
    },
    init (obj: any, isHorizon: any) {
      this.data = {};
      this.form.type = '';
      this.form.message = '';
      this.data = obj.data;
      this.title = this.$t('desktopManage.operation.sendNotification').toString();
      this.form.type =  isHorizon ? 'info' : 'notice'
      this.visible = true;
      this.$nextTick(() => {
        (this.$refs['form'] as any).clearValidate();
      })
    }
  }
})
</script>

<style lang="sass" scoped>

</style>
